<template>
  <div class="xtx-banner">
    <Carousel :banner-image-list="bannerImageList" />
  </div>
</template>

<script setup lang="ts">
import Carousel from '@/components/Carousel.vue'
import { bannerAPI } from '@/api/home'
import type { Banner } from '@/api/home/types.d'
import { ref } from 'vue'

/**
 * 获取轮播图图片列表
 */

const bannerImageList = ref<Banner[]>([])

function getBannerImages(): void {
  bannerAPI()
    .then((res) => {
      bannerImageList.value = res
    })
    .catch((err) => {
      console.log(err)
    })
}

getBannerImages()
</script>

<style lang="scss" scoped>
.xtx-banner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 98;
  width: 100%;
  height: 100%;

  :deep(.carousel-btn.prev) {
    left: 270px;
  }

  :deep(.carousel-indicator) {
    padding-left: 250px;
  }
}
</style>
